<template>
	<div>
		<div style="float: right;margin-right:2%;">
			<div style="margin:5px;display: inline-block;">
				<span>是否可用：</span>
				<el-select v-model="platform" style="width:150px;margin-left: 10px;" @change="shuaxin()">
					<el-option v-for="item in homeData1" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>&nbsp;&nbsp;&nbsp;
			</div>&emsp;&emsp;

			<el-button style="margin: 10px 0;" size="mini" type="primary" icon="document" @click="advertNotice"
				:disabled="!isAuth('serviceTypeTxKey:add')">添加</el-button>

			<el-button style="margin: 10px 0;" size="mini" type="primary" icon="document"
				@click="shuaxin">刷新</el-button>
		</div>

		<el-table v-loading="tableDataLoading" :data="guangaoData.records" height="650px">
			<el-table-column fixed prop="id" label="编号" width="80"></el-table-column>
			<el-table-column prop="content" label="腾讯地图KEY">
			</el-table-column>
			<el-table-column prop="title" label="使用次数">
				<template slot-scope="scope">
					<span>{{scope.row.使用次数}}</span>
					<div>
						<el-input @keydown.enter.native="addition(scope.row)" v-model="scope.row.title" clearable
							placeholder="例:5" type="number" :min="0" style="width: 120px;font-size:14px;"
							:disabled="!isAuth('serviceTypeTxKey:update')">
							<i slot="suffix" class="el-input__icon el-icon-search" @click="addition(scope.row)"></i>
						</el-input>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="createAt" label="创建时间">
			</el-table-column>
			<el-table-column prop="isSee" label="是否可用">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.isSee"
						@change="changeState(scope.row)"
						active-value="1" inactive-value="2" active-color="#13ce66"
						inactive-color="#ff4949">
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180">
				<template slot-scope="scope">
					<!-- <el-button size="mini" type="primary" style="margin: 3px;"
						@click="advertXhaxun(scope.row)">余额查询</el-button> -->
					<el-button size="mini" type="primary" :disabled="!isAuth('serviceTypeTxKey:update')"
						@click="advertUpdates(scope.row)" style="margin: 3px;">修改</el-button>
					<el-button size="mini" type="danger" :disabled="!isAuth('serviceTypeTxKey:delete')"
						@click="advertdeletes(scope.row)" style="margin: 3px;">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;margin-top: 10px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
				layout="total,sizes, prev, pager, next,jumper" :total="guangaoData.total">
			</el-pagination>
		</div>

		<!-- 添加 -->
		<el-dialog title="添加" :visible.sync="dialogFormVisible" center>

			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">腾讯地图KEY：</span>
				<el-input style="width:50%;" v-model="content" placeholder="请添加腾讯地图的key" type="text">
				</el-input>
			</div>
			
			<div style="margin-bottom: 10px;">
				<span style="width: 200px;display: inline-block;text-align: right;">使用次数：</span>
				<el-input style="width:50%;" v-model="title" type="number" :min="0" placeholder="请输入使用次数">
				</el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="advertNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 修改 -->
		<el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
			<el-form :model="form">
				<el-form-item label="腾讯地图KEY：" :label-width="formLabelWidth">
					<el-input style="width:90%;" v-model="form.content" placeholder="请输入腾讯地图的key" type="text"></el-input>
				</el-form-item>
			</el-form>
			<el-form :model="form">
				<el-form-item label="使用次数：" :label-width="formLabelWidth">
					<el-input style="width:90%;" v-model="form.title" placeholder="请输入使用次数" type="number"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="amendadvertTo()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 余额详情 -->
		<el-dialog title="余额详情" :visible.sync="dialogFormVisibleYe" center width="80%">
			<div>
				<div style="margin:5px;display: inline-block;">
					<span>开始时间：</span>
					<el-date-picker style="width: 160px;margin-left: 10px;" v-model="startTime" align="right"
						type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择开始时间">
					</el-date-picker>&nbsp;&nbsp;&nbsp;
				</div>
				<div style="margin:5px;display: inline-block;">
					<span>截止时间：</span>
					<el-date-picker style="width: 160px;margin-left: 10px;" v-model="endTime" align="right" type="date"
						format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择截止时间">
					</el-date-picker>
				</div>
				<!-- <el-date-picker
				      v-model="value1"
				      type="daterange"
					  unlink-panels
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期" :picker-options="pickerOptions">
				    </el-date-picker> -->
				<el-button size="mini" type="primary" style="margin: 3px;" @click="chaxunBtn()">查询</el-button>
			</div>
			<div style="color: orange;"> * 提示：选择时间段时，最大时间跨度为31天，否则数据量过多易出现卡顿或系统崩溃</div>
			<el-row>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">总金额</div>
							<div class="text_color"><span>{{yueData.sumMoney ? yueData.sumMoney : 0}}</span>美元
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">已用金额</div>
							<div class="text_color">
								<span>{{yueData.usageMoney ? yueData.usageMoney : 0}}</span>美元
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6" class="cards">
					<div class="box">
						<div class="box_num">
							<div class="box_color">剩余金额</div>
							<div class="text_color">
								<span>{{yueData.myMoney ? yueData.myMoney  : 0}}</span>美元
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-table v-loading="tableDataLoadingYe" :data="yueData.dailyCosts" height="450px">
				<el-table-column fixed prop="id" label="编号" width="80">
					<template slot-scope="scope">
						<span>{{scope.$index+1}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="costs" label="金额">
				</el-table-column>
				<el-table-column prop="createAt" label="使用时间">
				</el-table-column>
			</el-table>
			<!-- <div style="text-align: center;margin-top: 10px;">
				<el-pagination @size-change="handleSizeChangeY" @current-change="handleCurrentChangeY"
					:page-sizes="[10, 20, 30, 40]" :page-size="limit" :current-page="page"
					layout="total,sizes, prev, pager, next,jumper" :total="yueData.total">
				</el-pagination>
			</div> -->
		</el-dialog>
	</div>
</template>

<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import quillConfig from '../locality/quill-config.js'
	export default {
		components: {
			quillEditor
		},
		data() {
			return {
				platform: '',
				readFlag: 1,
				openValue: 1,
				closeValue: 2,
				page: 1,
				limit: 10,
				message: '',
				content: '',
				type: 3,
				homeData1: [{
					id: '',
					name: '全部'
				}, {
					id: 1,
					name: '可用'
				}, {
					id: 2,
					name: '不可用'
				}],
				form: {
					id: '',
					isSee: 1,
					content: '',
					title:'',
				},
				formLabelWidth: '200px',
				tableDataLoading: false,
				dialogFormVisible1: false,
				dialogFormVisible: false,
				guangaoData: [],
				quillOption: quillConfig,
				yueData: {},
				dialogFormVisibleYe: false,
				tableDataLoadingYe: false,
				startTime: '',
				endTime: '',
				info: {
					stockDate: this.getNowTime(), //日期
				},
				info1: {
					stockDate1: this.getNowTime1(), //日期
				},
				value1: "",
				rows: {},
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				title:'',

			}
		},
		methods: {
			//处理默认选中当前日期
			getNowTime1() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期
				var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
				var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
				var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
				month = month + 1;
				month = month.toString().padStart(2, "0");
				date = date.toString().padStart(2, "0");
				console.log('now', year, '--', month, '--', date)
				var defaultDate = `${year}-${month}-${date}`;
				return defaultDate;
				this.$set(this.info, "stockDate", defaultDate);
			},
			//处理默认选中当前日期
			getNowTime() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth(); //得到月份
				// var month = now.getMonth() - now.getMonth() //得到月份
				var date = now.getDate() - now.getDate() + 1 //得到日期
				console.log('now----1-', year, '--', month, '--', date)
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date}`
				console.log('now-----2', year, '--', month, '--', date)
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			handleAvatarSuccess(file) {
				this.imgUrl = file.data
				this.linkUrl = this.imgUrl
			},
			handleAvatarSuccess1(file) {
				this.form.imgUrl = file.data
				this.form.linkUrl = this.form.imgUrl
			},
			handleSizeChange(val) {
				this.limit = val
				this.guangaoSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.guangaoSelect()
			},
			handleSizeChangeY(val) {
				this.limit = val
				this.guangaoSelect()
			},
			handleCurrentChangeY(val) {
				this.page = val
				this.guangaoSelect()
			},
			// 刷新
			refresh() {
				this.choicenSelect()
				this.handpick()
			},
			// 添加素材弹框
			advertNotice() {
				this.content = ''
				this.title = ''
				this.dialogFormVisible = true
			},
			// 状态
			changeState(row) {
				this.$http({
					url: this.$http.adornUrl('message/update'),
					method: 'post',
					data: this.$http.adornData({
						'id': row.id,
						'isSee': row.isSee,
						'content': row.content,
						'title':row.title
						
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.guangaoSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {
								this.guangaoSelect()
							}
						})
					}

				})
			},
			// 添加
			advertNoticeTo() {
				if (this.content == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入腾讯地图Key',
						type: 'warning'
					})
					return
				}
				if (this.title === '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入使用次数',
						type: 'warning'
					})
					return
				}
				this.$http({
					url: this.$http.adornUrl(`message/add `),
					method: 'post',
					data: this.$http.adornData({
						'content': this.content,
						'state': 12,
						'isSee': 1,
						'title':this.title,
					})
				}).then(({
					data
				}) => {
					this.dialogFormVisible = false
					this.$message({
						message: '操作成功',
						type: 'success',
						duration: 1500,
						onClose: () => {

							this.guangaoSelect()
						}
					})
				})
			},
			// 点击修改
			advertUpdates(rows) {
				this.form.id = rows.id
				this.form.isSee = rows.isSee
				this.form.content = rows.content
				this.form.title = rows.title
				this.dialogFormVisible1 = true
			},
			// 确定修改
			amendadvertTo() {
				if (this.form.content == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入腾讯地图Key',
						type: 'warning'
					})
					return
				}
				if (this.form.title == ''||this.form.title==null) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入使用次数',
						type: 'warning'
					})
					return
				}
				this.$http({
					url: this.$http.adornUrl('message/update'),
					method: 'post',
					data: this.$http.adornData({
						'id': this.form.id,
						'isSee': this.form.isSee,
						'content': this.form.content,
						'title':this.form.title,
					})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.guangaoSelect()
								this.dialogFormVisible1 = false
							}
						})
					} else {
						this.$notify({
							title: '提示',
							duration: 1800,
							message: data.msg,
							type: 'warning'
						})
					}

				})
			},
			// 删除广告
			advertdeletes(row) {
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`message/deleteMessageById`),
						method: 'post',
						params: this.$http.adornParams({
							'id': row.id
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.guangaoSelect()
								}
							})
						} else {
							this.$notify({
								title: '提示',
								duration: 1800,
								message: data.msg,
								type: 'warning'
							})
						}

					})
				})
			},
			// 获取数据
			guangaoSelect() {
				// let page = this.page
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('message/selectMessageByType'),
					method: 'get',
					params: this.$http.adornParams({
						'page': this.page,
						'isSee': this.platform,
						'state': 12,
						'limit': this.limit
					})
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					let returnData = data.data
					this.guangaoData = returnData




				})
			},
			// 修改次数
			addition(row) {
				this.$confirm(`确定要修改次数吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl('message/update'),
						method: 'post',
						// params: this.$http.adornParams({
						data: this.$http.adornData({
							'id': row.id,
							'isSee': row.isSee
						})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '修改成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.guangaoSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {
									this.guangaoSelect()
								}
							})
						}

					})
				}).catch(() => {})
			},
			shuaxin() {
				this.page = 1
				this.guangaoSelect()
			},
			// 余额查询弹框
			advertXhaxun(row) {
				this.startTime = this.info.stockDate
				this.endTime = this.info1.stockDate1
				this.dialogFormVisibleYe = true
				this.rows = row
				this.yueSelect(this.rows)
			},
			// 获取余额数据
			yueSelect(row) {

				if (!this.startTime || !this.endTime) {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '时间不能为空',
						type: 'warning'
					})
					return
				}
				if (this.startTime == '' || this.endTime == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '时间不能为空',
						type: 'warning'
					})
					return
				}
				this.tableDataLoadingYe = true
				this.$http({
					url: this.$http.adornUrl2('message/selectChatMoney'),
					method: 'get',
					params: this.$http.adornParams({
						'key': row.content,
						'startTime': this.startTime,
						'endTime': this.endTime
					})
				}).then(({
					data
				}) => {
					if (data.code == 500) {
						this.$message({
							message: '时间维度过大，请调小范围',
							type: 'warning',
							duration: 2000,
							onClose: () => {

							}
						})
					}
					this.tableDataLoadingYe = false
					let returnData = data.data


					if (returnData.dailyCosts.length > 0) {

						for (var i in returnData.dailyCosts) {
							// 转换时间

							var now = new Date((returnData.dailyCosts[i].timestamp) * 1000);
							var year = now.getFullYear(); //得到年份
							var month = now.getMonth(); //得到月份
							var date = now.getDate(); //得到日期
							var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
							var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
							var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
							month = month + 1;
							month = month.toString().padStart(2, "0");
							date = date.toString().padStart(2, "0");
							var defaultDate = `${year}-${month}-${date}`;

							returnData.dailyCosts[i].createAt = defaultDate

							// 使用情况
							var costs = 0
							for (var j in returnData.dailyCosts[i].line_items) {

								if (Number(returnData.dailyCosts[i].line_items[j].cost) > 0) {
									costs = costs + Number(returnData.dailyCosts[i].line_items[j].cost)
								}
								console.log(costs, typeof costs)
								costs = costs / 100

							}
							costs = costs.toFixed(5)
							if (costs == 0.00000) {
								costs = 0
							}
							returnData.dailyCosts[i].costs = costs
							console.log('costs`---', returnData.dailyCosts[i].costs)
						}
					}
					this.yueData = returnData

				})
			},
			chaxunBtn() {
				console.log('value1', this.value1)
				this.yueSelect(this.rows)
			}
		},
		mounted() {
			this.guangaoSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}

	.box {
		padding: 44px;
		border: 1px solid #eee;
		margin: 15px 10px;
	}

	.box_num {
		font-size: 14px;
		color: #66b1ff;
	}

	.box_num .box_color {
		color: #333;
		font-size: 14px;
		margin-bottom: 15px;
	}

	.box_num div span {
		font-size: 20px;
		margin-left: 5px;
	}

	.text_color {
		color: #4f9dec;
	}

	.text_color span {
		margin-right: 5px;
	}
</style>